<template>
    <div class="box_bg" >
        <h2 class="box_tit">
            <i class="icon icon1"></i>我的
            <i class="reti"></i>
        </h2>
        <div class="blank20"></div>
        <div class = "myDynamics">
            <ul>
                <li class="myLi">
                    <span>状态 ：</span>
                    <select >
                        <option v-for="item in stateSelects" v-model="item.value">{{ item.value }}</option>
                    </select>
                </li>
                <li class="myLi">
                    <span>时间 ：</span>
                    <el-date-picker v-model="value1"  type="datetime"  placeholder="选择日期时间">
                    </el-date-picker>

                </li>
                <li class="myLi">
                    <span>至</span>
                    <el-date-picker v-model="value2"  type="datetime"  placeholder="选择日期时间">
                    </el-date-picker>
                </li>
                 <li class="myLi">
                    <span>关键词 ：</span>
                    <input type="text" placeholder="请输入关键词"  value=""/>
                </li>
                <li class="myLi">
                    <a class="btns search" href="javascript:void(0);">搜索</a>
                </li>
            </ul>
        </div>
        <ul class="myNav">
            <li v-for="item in myNavList" :key="item.id">
                <h3>{{item.title}}</h3>
                <p>{{item.nav}}</p>
                <div>{{item.time}}</div>
                <span>阅读全文>></span>
            </li>
        </ul>
    </div>
</template>

<script>

export default {
  data() {
    return {
      stateSelects: [
        { value: 1 },
        { value: 2 },
        { value: 3 },
        { value: 4 },
        { value: 5 },
        { value: 6 }
      ],
      myNavList: [
        {
          title: "网易视频推出国内外名校的公开视频",
          id: "1",
          time: "2017/11/08",
          nav:
            "物、情节、环境是小说的三要素。情节一般包括开端、发展、高潮、结局四部分，有的包括序幕、尾声。环境包括自然环境和社会环境。 小说按照篇幅及容量可分为长篇、中篇、短篇和微型小说（小小说）。按照表现的内容可分为神话、科幻、公案、传奇、武侠、言情、同人、官宦等。按照体制可分为章回体小说、日记体小说、书信体小说、自传体小说。按照语言形式可分为文言小说和白话小说"
        },
        {
          title: "网易视频推出国内外名校的公开视频2",
          id: "2",
          time: "2017/11/082",
          nav:
            "2物、情节、环境是小说的三要素。情节一般包括开端、发展、高潮、结局四部分，有的包括序幕、尾声。环境包括自然环境和社会环境。 小说按照篇幅及容量可分为长篇、中篇、短篇和微型小说（小小说）。按照表现的内容可分为神话、科幻、公案、传奇、武侠、言情、同人、官宦等。按照体制可分为章回体小说、日记体小说、书信体小说、自传体小说。按照语言形式可分为文言小说和白话小说"
        }
      ],
      pickerOptions1: {
          shortcuts: [{
            text: '今天',
            onClick(picker) {
              picker.$emit('pick', new Date());
            }
          }, {
            text: '昨天',
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24);
              picker.$emit('pick', date);
            }
          }, {
            text: '一周前',
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit('pick', date);
            }
          }]
        },
        value1: '',
        value2: '',


    };
  },
  mounted() {},
  methods: {},
  components: {}

};
</script>
<style scoped>
.myDynamics {
  width: 100%;
  overflow: hidden;
  height: 50px;
  border-bottom: 1px solid #e6e8ec;
}
.myNav {
  display: block;
  width: 100%;
  overflow: hidden;
  min-height: 400px;
}
.myNav > li {
  position: relative;
  border-bottom: 1px solid #e6e8ec;
}
.myNav > li > span {
  position: absolute;
  bottom: 0px;
  right: 20px;
  cursor: pointer;
}
.myNav p {
  height: 50px;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}
.myLi {
  display: inline-block;
  padding-right: 10px;
}
.myDynamics select,.myDynamics input {
  width: 100px;
}
.el-date-editor.el-input, .el-date-editor.el-input__inner{
  width:150px;
}
.myDynamics textarea {
  border: 1px solid #cdcdcd;
  width: 400px;
  height: 100px;
}
.myDynamics .sousuo {
  display: inline-block;
  height: 26px;
  width: 86px;
  line-height: 26px;
  font-size: 12px;
  border-radius: 15px;
  text-indent: 50px;
  cursor: pointer;
  color: #fff;
  background: #24afaf;
}
.box_bg .reti{
  width: 70px;
}
</style>